<template>
    <div>
        <p>
            <button @click="add()" class="btn btn-white btn-default btn-round">
                <i class="ace-icon fa  fa-pencil-square-o red2"></i>
                添加
            </button>
            &nbsp;
            <button @click="list(1)" class="btn btn-white btn-default btn-round">
                <i class="ace-icon fa   fa-arrow-circle-o-down red2"></i>
                刷新
            </button>
        </p>
        <pagination ref="pagination" v-bind:list="list"  v-bind:itemCount="2" ></pagination>
        <div class="row">
            <div v-for="teacher in teachers" class="col-md-3">
                <div>
          <span class="profile-picture">
            <img v-show="!teacher.image" class="editable img-responsive editable-click editable-empty" src="\ace\assets\images\avatars\profile-pic.jpg" v-bind:title="teacher.intro"/>
            <img v-show="teacher.image" class="editable img-responsive editable-click editable-empty" v-bind:src="teacher.image" v-bind:title="teacher.intro"/>
          </span>

                    <div class="space-4"></div>

                    <div class="width-85 label label-info label-xlg arrowed-in arrowed-in-right">
                        <div class="inline position-relative">
                            <a href="javascript:;" class="user-title-label dropdown-toggle" data-toggle="dropdown">
                                <i class="ace-icon fa fa-circle light-green"></i>
                                &nbsp;
                                <span class="white">{{teacher.position}}</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="space-6"></div>

                <div class="text-center">
                    <a href="javascript:;" class="text-info bigger-110" v-bind:title="teacher.motto">
                        <i class="ace-icon fa fa-user"></i>
                        {{teacher.name}}【{{teacher.nickname}}】
                    </a>
                </div>

                <div class="space-6"></div>

                <div class="profile-social-links align-center">
                    <button v-on:click="update(teacher)" class="btn btn-xs btn-info">
                        <i class="ace-icon fa fa-pencil bigger-120"></i>
                    </button>
                    &nbsp;
                    <button v-on:click="del(teacher.id)" class="btn btn-xs btn-danger">
                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                    </button>
                </div>

                <div class="hr hr16 dotted"></div>

            </div>
        </div>
        <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">讲师表单</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">姓名</label>
                                            <div class="col-sm-10">
                                                <input v-model="teacher.name" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">昵称</label>
                                            <div class="col-sm-10">
                                                <input v-model="teacher.nickname" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">头像</label>
                                            <div class="col-sm-10">
                                                <file v-bind:input-id="'image-upload'"
                                                      v-bind:text="'上传头像'"
                                                      v-bind:suffixs="['jpg', 'jpeg', 'png']"
                                                      v-bind:after-upload="afterUpload"></file>
                                                <div v-show="teacher.image" class="row">
                                                    <div class="col-md-6">
                                                        <img v-bind:src="teacher.image" class="img-responsive">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">职位</label>
                                            <div class="col-sm-10">
                                                <input v-model="teacher.position" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">座右铭</label>
                                            <div class="col-sm-10">
                                                <input v-model="teacher.motto" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">简介</label>
                                            <div class="col-sm-10">
                                                <textarea v-model="teacher.intro" class="form-control" rows="6"></textarea>
                                            </div>
                                        </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button v-on:click="save()" type="button" class="btn btn-primary">保存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    </div>
</template>
<script>
    import Pagination from "../../components/pagination";
    import File from "../../components/file";
    export default {
        name: 'teacher',
        components:{Pagination,File},
        mounted() {//在组件内容被渲染到页面之【后】立即执行的函数
            let _this = this;
            $('body').attr('class', 'no-skin');
            //默认分页每页显示5条
            _this.$refs.pagination.size = 5;
            _this.list(1);
        },
        data(){
            return{
                teachers:[],
                teacher:{}
            }
        },
        methods:{
            //进行Axios异步通讯
            list(page){
                //加载框显示
                Loading.show();
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER+"/business/teacher/getAllTeachers",{
                    page:page,
                    size:_this.$refs.pagination.size,
                }).then(function (response) {
                    let responseBody = response.data;//获取到axios响应的结果对象
                    _this.teachers = responseBody.list;//获取查询的结果
                    //渲染分页组件的效果
                    _this.$refs.pagination.render(page, responseBody.total);
                    //加载框显示
                    Loading.hide();
                });
            },
            //添加操作
            add(){
                //清空当前对象
                let _this = this;
                _this.teacher = {};
                //弹出添加窗口
                $("#form-modal").modal("show");
            },
            //更新操作
            update(teacher){
                let _this = this;
                //获取选中行的数据
                _this.teacher = $.extend({}, teacher);
                //弹出添加窗口
                $("#form-modal").modal("show");
            },
            //调用后台接口完成数据的添加和更新
            save(){
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER+"/business/teacher/save",_this.teacher).then(function (response) {
                    let responseBody = response.data;//获取到axios响应的结果对象
                    //将弹出框消失
                    $("#form-modal").modal("hide");
                    //弹出接口返回的提示
                    Toast.success(responseBody.msg);//获取查询的结果
                    //刷新页面
                    _this.list(1);
                    /* //渲染分页组件的效果
                     _this.$refs.pagination.render(page, responseBody.total);*/
                });
            },
            //删除数据
            del(id){
                let _this = this;
                //确认框
                Confirm.show("数据删除后将无法恢复,确定删除吗?",function(){
                    _this.$ajax.get(process.env.VUE_APP_SERVER+"/business/teacher/deleteTeacher?id="+id).then(function (response) {
                        let responseBody = response.data;//获取到axios响应的结果对象
                        //弹出接口返回的提示
                        Toast.success(responseBody.msg);//获取查询的结果
                        //刷新页面
                        _this.list(1);
                        /* //渲染分页组件的效果
                         _this.$refs.pagination.render(page, responseBody.total);*/
                    });
                });

            },
            afterUpload(resp) {
                let _this = this;
                let filePath = resp.uploadFile.path;
                _this.teacher.image = filePath;
                // 解决不能实时预览的问题
                _this.$forceUpdate();
            }
        }
    }
</script>
